<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Gallery and Zoom</title>

<link href="css/jquery.jqzoom.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jqzoom-core.js"></script>
    <style>
    #container a
    {
        border:1px solid #e7e7e7;
        background-image:url("images/bg_imgSlide.gif");
	    margin:0 2px;
	    overflow:hidden;display:block;float:left;width:150px;height:100px;position:relative;left:-316px;
    }
    .zoomPreload {
      border: none;
      background-color: transparent;
    }
    </style>
<script>	
var DB88={};
//重置图片宽度，高度插件 ( parentDem是父元素，imgDem是图片 )
jQuery.imgResize2 = function(parentDem,imgDem){
    if(imgDem.w>0 && imgDem.h>0){
        var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
        //如果 指定高度/图片高度 小于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定高度/图片高度。
        //如果 指定高度/图片高度 大于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定宽度/图片宽度。
        if(rate <= 1){
            imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
            imgDem.h = imgDem.h*rate;
        }else{// 如果比例数大于1，则新的宽度等于以前的宽度。
            imgDem.w = imgDem.w;
            imgDem.h = imgDem.h;
        }
    }
    return imgDem;
}

//使图片在父元素内水平，垂直居中，( parentDem是父元素，imgDem是图片 )
jQuery.imgCenter = function (parentDem, imgDem) {
    var left = (parentDem.w - imgDem.w) * 0.5;
    var top = (parentDem.h - imgDem.h) * 0.5;
    if (top < 0) {
        top = 0;
    }
    if (left < 0) {
        left = 0;
    }
    return { "l": left, "t": top };
}

DB88.ShopDetail = {
    ImageScroll: function (opt) {
        var t = this;

        //获取小图的宽，高。保证宽度为imgW
        function resizeSmallImage(parentDem, imgDem) {
            return { w: options.imgW, h: (parentDem.w / imgDem.w) * imgDem.h };
        }

        //获取小图的left，top。保证垂直居中
        function centerSamllImage(parentDem, imgDem) {
            return { l: 0, t: (parentDem.h - imgDem.h) / 2 };
        }
        var options = $.extend({
            centerIdx: 4, //中间对象的索引
            startLeft: -316, //初始left
            smallTop: 69, //小图初始top
            largeTop: 0, //大图初始top
            imgW: 150, //小图宽度
            imgH: 100, //小图高度
            imgM: 2, //小图margin-left,and margin-right
            limgW: 280, //大图宽度
            limgH: 240, //大图高度
            limgM: 16, //大图margin-left,right
            offsetLeft: 2, //
            interval: 500
        }, opt);

        var imagesdata = [];
        var canMove = true; //防止点击多次
        var target = $(".88DB_ShopImage img");

        //return {src,margin:{l,t},wh:{w,h},lwh:{w,h},lmargin:{l,t}}
        //@src string 图片url
        //@smallSize {w,h}
        //@largeSize {w,h}
        var ii = 0;
        var calImageDataFromObject = function (s, smallSize, largeSize) {
            var result = {};
            //小图位置
            var parents = smallSize; //父节点的宽高				
            var resize = resizeSmallImage({ w: parents.w, h: parents.h }, { w: s.w, h: s.h })  //w,h

            result.wh = resize; // $.extend(resize,{w:options.imgW});
            //console.log(result.wh);
            var margin = centerSamllImage({ w: parents.w, h: parents.h }, { w: resize.w, h: resize.h });  //l,t
            result.margin = margin;

            //大图位置
            parents = largeSize; //父节点的宽高				
            resize = $.imgResize2({ w: parents.w, h: parents.h }, { w: s.w, h: s.h })  //w,h
            result.lwh = resize;

            margin = $.imgCenter({ w: parents.w, h: parents.h }, { w: resize.w, h: resize.h });  //l,t
            result.lmargin = margin;
            return result;
        }
        var calImageData = function (src, smallSize, largeSize) {
            var image = new Image();
            var result = { src: "", margin: { l: 0, t: 0 }, wh: { w: 0, h: 0 }, lwh: { w: 0, h: 0 }, lmargin: { l: 0, t: 0} };
            result.src = src;

            $(image).error(function () {
                result.src = "../Images/img_noImg.jpg";
                var s = { w: 280, h: 210 };
                $.extend(result, calImageDataFromObject(s, smallSize, largeSize));

            }).attr("src", src);

            $(image).load(function () {
                var s = {}; //当前image的宽高
                s.w = image.width;
                s.h = image.height;

                $.extend(result, calImageDataFromObject(s, smallSize, largeSize));


            }).attr("src", src);
            return result;
        }


        //设置单击事件
        $(".88DB_ShopImage").click(function () {
            var idx = $(this).attr("index");
            var disabled = $(this).attr("_disabled");
            if (disabled != "true") {
                t.Move(idx);
            }
        });

        //初始化
        //设置imagesdata的值，用于更改大小
        $(".88DB_ShopImage img").each(function (i, e) {
            var t = $(e);
            var src = t.attr("src");
            imagesdata.push(calImageData(src, { w: options.imgW, h: options.imgH }, { w: options.limgW, h: options.limgH }));
            t.load(function () {
                var s = {}; //当前image的宽高
                s.w = e.width;
                s.h = e.height;


                var parents = {}; //父节点的宽高
                var resize = {};
                var margin = {};
                if (i == options.centerIdx)//中间那个
                {
                    parents = { w: options.limgW, h: options.limgH };
                    resize = $.imgResize2({ w: parents.w, h: parents.h }, { w: s.w, h: s.h })  //w,h
                    margin = $.imgCenter({ w: parents.w, h: parents.h }, { w: resize.w, h: resize.h });  //l,t
                } else {
                    parents = { w: options.imgW, h: options.imgH };
                    resize = resizeSmallImage({ w: parents.w, h: parents.h }, { w: s.w, h: s.h })  //w,h
                    margin = centerSamllImage({ w: parents.w, h: parents.h }, { w: resize.w, h: resize.h });  //l,t
                }

                t.css({ height: resize.h, width: resize.w, "margin-top": margin.t, "margin-left": margin.l });
            }).attr("src", src);
        });


        //@count int 移动多少个
        //@idx  int 移动第几个
        //@direction string 方向"left" or "right"
        this.Move = function (idx) {
            var count = 0;
            if (canMove == false) {
                return;
            }
            //先移除jqzoom增加的div
            var c = $(".zoomPad .SlidShowImg").clone();
            $(".zoomPad").remove();
            $(".88DB_ShopImage[index=4]").append(c)

            var _imgW = options.imgW;
            if (options.centerIdx > idx) {
                direction = "right"
                _imgW *= -1; //设置left用
                count = options.centerIdx - idx;
            }
            else {
                direction = "left";
                count = idx - options.centerIdx;
            }
            canMove = false;
            $(".88DB_ShopImage:eq(" + options.centerIdx + ")").attr("_disabled", "false");
            //全部还原移位
            $(".88DB_ShopImage").animate({ "margin-top": 0, "margin-bottom": 0, "margin-right": "2px", "margin-left": "2px", left: (-(_imgW + options.imgM * 2) * count + options.offsetLeft + options.startLeft - 6) + 'px', top: options.smallTop, width: options.imgW + "px", height: options.imgH + "px" }, { queue: false, duration: options.interval });
            $(".88DB_ShopImage img").each(function (i, e) {
                var t = $(e);
                t.parent().removeClass("lightbox-json");
                var originalIdx = t.parent().attr("originalIdx");
                t.animate({ width: imagesdata[originalIdx].wh.w, height: imagesdata[originalIdx].wh.h, "margin-left": imagesdata[originalIdx].margin.l, "margin-top": imagesdata[originalIdx].margin.t }, { queue: false, duration: options.interval });
            });
            //当前这个放大居中
            var hasMove = false;
            var _this = $(".88DB_ShopImage:eq(" + idx + ")");
            var originalIdx = _this.attr("originalIdx");
            $(".88DB_ShopImage:eq(" + idx + ") img").animate({ width: imagesdata[originalIdx].lwh.w, height: imagesdata[originalIdx].lwh.h, "margin-left": imagesdata[originalIdx].lmargin.l, "margin-top": imagesdata[originalIdx].lmargin.t }, { queue: false, duration: options.interval });
            _this.attr("_disabled", "true").animate({ "margin-left": options.limgM, "margin-right": options.limgM, width: options.limgW + "px", height: options.limgH + "px", top: options.largeTop + 'px' }, options.interval, function () {
                //return;
                if (hasMove == false) {
                    for (var i = 0; i < count; i++) {
                        if (direction == "right") {
                            $("#container").prepend($(".88DB_ShopImage:last"));
                        } else {
                            $("#container").append($(".88DB_ShopImage:first"));
                        }
                        $(".88DB_ShopImage").css({ left: options.startLeft });
                    }
                    $(".88DB_ShopImage").each(function (i, e) {
                        $(e).attr("index", i);
                    });
                    //_this.addClass("lightbox-json");
                    //放大镜处理
                    t.setJqzoom(_this);
                    //_this.removeData("jqzoom");
                    //_this.jqzoom({zoomType: 'innerzoom' });  
                    //$(".zoomWindow").css({left:_this.find(".SlidShowImg").css("margin-left"),top:_this.find(".SlidShowImg").css("margin-top")});

                    hasMove = true;
                    canMove = true;
                }
            } //end function
			); //end animate
        };

        this.getImagesData = function () { return imagesdata; };

        //设置指定对象jqzoom
        //@_this A jq对象
        this.setJqzoom = function (_this) {
            _this.removeData("jqzoom");
            _this.jqzoom({ zoomType: 'innerzoom',title:false });
            //alert(_this.find(".SlidShowImg").css("margin-top"));
            $(".zoomWindow").css({ left: _this.find(".SlidShowImg").css("margin-left"), top: _this.find(".SlidShowImg").css("margin-top") });

        }

        this.MoveLeft = function (count) {
            if (typeof (count) == "undefined") {
                count = 1;
            }
            this.Move(options.centerIdx - count);
        }
        this.MoveRight = function (count) {
            if (typeof (count) == "undefined") {
                count = 1;
            }
            this.Move(options.centerIdx + count);
        }
        return this;
    }
};


</script>
</head>

<body>
<input id="step"/>(1~5)<input type="button" id="move" value="move"/><hr/>
<input type="button" id="left" value="left"/>
<input type="button" id="left2" value="left2"/><br/>
<input type="button" id="right" value="right"/>
<input type="button" id="right2" value="right2"/><br/>
<div style="overflow:hidden;width:934px;height:243px;position:relative;left:20px">
    <div style="width:14000px;height:325px;position:relative" id="container">
		<a href="images/5.gif" onclick="return false;" class="88DB_ShopImage" style="top:69px;" index="0" originalIdx="0" ><img src="images/5.gif" class="SlidShowImg" /></a>
		<a href="images/6.gif" onclick="return false;" class="88DB_ShopImage" style="top:69px;" index="1" originalIdx="1" ><img src="images/6.gif" class="SlidShowImg"/></a>
		<a href="images/1.jpg" onclick="return false;" class="88DB_ShopImage" style="top:69px;" index="2" originalIdx="2" ><img src="images/1.jpg" class="SlidShowImg"/></a>
		<a href="images/2.jpg" onclick="return false;" class="88DB_ShopImage" style="top:69px;" index="3" originalIdx="3" ><img src="images/2.jpg" class="SlidShowImg"/></a>
		<a href="images/3.png" onclick="return false;" class="88DB_ShopImage" style="width:280px;height:240px;top:    0px;margin:0 16px" index="4" originalIdx="4" _disabled="true"><img src="images/3.png" class="SlidShowImg"/></a>    
		<a href="images/4.jpg"  onclick="return false;" class="88DB_ShopImage" style="top:69px;" index="5" originalIdx="5" ><img src="images/4.jpg"  class="SlidShowImg"/></a>
		<a href="images/5.gif" onclick="return false;" class="88DB_ShopImage" style="top:69px;" index="6" originalIdx="6" ><img src="images/5.gif" class="SlidShowImg"/></a>
		<a href="images/6.gif" onclick="return false;" class="88DB_ShopImage" style="top:69px;" index="7" originalIdx="7" ><img src="images/6.gif" class="SlidShowImg"/></a>
		<a href="images/1.jpg" onclick="return false;" class="88DB_ShopImage" style="top:69px;" index="8" originalIdx="8" ><img src="images/1.jpg" class="SlidShowImg"/></a>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		var s;
		s = DB88.ShopDetail.ImageScroll();
		$(".88DB_ShopImage[index=4] img").load(function () {
			s.setJqzoom($('.88DB_ShopImage:eq(4)'));
		});
		$("#left").click(function(){
			s.MoveLeft();
		});
		$("#left2").click(function(){
			s.MoveLeft(2);
		});
		$("#right").click(function(){
			s.MoveRight();
		});
		$("#right2").click(function(){
			s.MoveRight(2);
		});
		$("#move").click(function(){
			var step=($("#step").val());
			s.Move(parseInt(step)+1);
		});
	});	
</script>
</body>
</html>
